<template>
	<view class="wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/me-43.png"></image>
				</view>
				<view class="title">收款</view>
				<view></view>
			</view>
		</view>
		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="main-ctr">
				<l-painter ref="painter">
					<l-painter-view>
						<l-painter-image src="../../static/img/token_1.png" css="width: 80rpx; height: 80rpx; display: block; margin: 0 auto;"></l-painter-image>
					</l-painter-view>
					
					<l-painter-view css="margin-top: 20rpx; text-align: center;">
						<l-painter-text text="BNB(Binance (BSC))" css="font-size: 32rpx; color: #333;"></l-painter-text>
					</l-painter-view>
					
					<l-painter-view css="margin-top: 26rpx; text-align: center;">
						<l-painter-text text="扫描二维码，可以向我支付" css="font-size: 28rpx; color: #333;"></l-painter-text>
					</l-painter-view>
					
					<l-painter-view>
						<l-painter-qrcode :text="userInfo.bepAddress" css="width: 360rpx; height: 360rpx; margin: 0 auto; margin-top: 40rpx;"></l-painter-qrcode>
					</l-painter-view>
					
					<l-painter-view css="width: 500rpx; margin: 40rpx auto 0; text-align: center;">
						<l-painter-text :text="userInfo.bepAddress" css="font-size: 24rpx; color: #999;"></l-painter-text>
					</l-painter-view>
				</l-painter>
				
				<view class="coin-row">
					<view @click="save()">
						<image src="../../static/img/me-44.png"></image> 保存
					</view>
					<view @click="copyAddress">
						<image src="../../static/img/me-45.png"></image> 复制地址
					</view>
				</view>
			</view>

			<view class="main-take">
				<view>注意：该地址仅支持USDT(Binance(BSC)链)收款，请 勿转入其他公链资产</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	// import QRCode from 'qrcode'
	import { getMeUserAPI } from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				userInfo: '',
				qrCodeBase64: ''
			}
		},
		mixins: [navBarMixin],
		methods: {
			base64ToTempFilePath(base64Str, successCallback, errorCallback) {
				const fsm = uni.getFileSystemManager();

				// 创建临时文件路径
				const tempFilePath = `${uni.env.USER_DATA_PATH}/${Date.now()}.png`;

				// 将Base64字符串写入临时文件
				fsm.writeFile({
					filePath: tempFilePath,
					data: base64Str,
					encoding: 'base64',
					success: () => {
						if (typeof successCallback === 'function') {
							successCallback(tempFilePath);
						}
					},
					fail: (error) => {
						if (typeof errorCallback === 'function') {
							errorCallback(error);
						}
					}
				});
			},
			save() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						let that = this
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
							}
						})
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			// 获取本人信息
			async getMeUserInfo() {
				const res = await getMeUserAPI()
				if (!res.code) {
					this.userInfo = res.data
					this.createQRCode(res.data.bepAddress)
				}
			},
			async createQRCode(text) {
				try {
					// 生成二维码
					this.qrCodeBase64 = await QRCode.toDataURL(text);

					console.log('this.qrCodeBase64===', this.qrCodeBase64)
					var qr = new UQRCode();
					// 设置二维码内容
					qr.data = this.qrCodeBase64;
					// 设置二维码大小，必须与canvas设置的宽高一致
					qr.size = 400;
					// 调用制作二维码方法
					qr.make();
					// 获取canvas上下文
					var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
					// 设置uQRCode实例的canvas上下文
					qr.canvasContext = canvasContext;
					// 调用绘制方法将二维码图案绘制到canvas上
					qr.drawCanvas();

				} catch (error) {
					console.error('生成二维码失败:', error);
				}
			},
			copyAddress() {
				uni.setClipboardData({
					data: this.userInfo.bepAddress,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			}

		},
		onLoad() {
			this.getMeUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// background: $theme-color-a;
	}

	.wf-box {
		height: 100vh;
		overflow: hidden;
		background-color: #3E93FF;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}

		.head {
			position: fixed;
			z-index: 1;
			width: 100%;
			background: $theme-color-a;

			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}

		.main {
			margin-top: 126rpx;
			padding: 0 30rpx;

			.main-ctr {
				padding-top: 40rpx;
				border-radius: 20rpx;
				background: #Fff;
				overflow: hidden;

				.coin-img {
					display: block;
					width: 80rpx;
					height: 80rpx;
					margin: 0 auto;
				}

				.coin-name {
					margin-top: 20rpx;
					color: #333;
					font-size: 32rpx;
					text-align: center;
				}

				.coin-tip {
					margin-top: 30rpx;
					font-size: 28rpx;
					color: #333;
					text-align: center;
				}

				.coin-ewm {
					width: 360rpx;
					height: 360rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					// margin-top: 40rpx;
					// border: 2rpx solid #000;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.coin-add {
					padding: 0 68rpx;
					margin-top: 40rpx;
					word-wrap: break-word;
					word-break: break-all;
					text-align: center;
					color: #999;
				}

				.coin-row {
					display: flex;
					height: 118rpx;
					margin-top: 60rpx;
					background: #F6F7FB;

					view {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							margin-right: 20rpx;
							width: 48rpx;
							height: 48rpx;
						}

						&:first-child {
							position: relative;

							&::after {
								content: '';
								position: absolute;
								top: 50%;
								right: 0;
								width: 2rpx;
								height: 30rpx;
								transform: translateY(-50%);
								background: #D8D8D8;
							}

						}
					}
				}
			}

			.main-take {
				padding: 0 44rpx;
				margin-top: 30rpx;

				&>view {
					font-size: 24rpx;
					color: #eee;
					text-align: center;
				}
			}
		}
	}
</style>